<template>
    <div style="overflow-y: scroll; overflow-x: hidden; height: 100vh">
        <div style="width: 90%; margin: 20px auto 0" ref="printContent">
            <div style="overflow: hidden; width: 100%">
                <el-button type="primary" size="small" style="float: right" v-print="printObj" @click="printmsg">打印</el-button>
            </div>
            <!-- padding: 10px 30px -->
            <div style="max-width: 100%;" id="print-content">
                <el-form ref="form" :model="form" label-position="labelPosition">
                    <table class="table-1">
                        <!-- 三行三列的表格 -->
                        <tr>
                            <td colspan="6" style="font-weight: 700; padding: 10px; font-size: 20px">自有房屋租金交款单</td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">交款单位：</td>
                            <td colspan="3">
                                {{ form.czr }}
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">管理部门：</td>
                            <td>房产经理部</td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">交款形式：</td>
                            <td colspan="3" v-if="jkxsbutton" @dblclick="jkxsbutton = false">
                                {{ form.zjlb }}
                            </td>
                            <td colspan="3" v-else>
                                <el-form-item prop="dwczh">
                                    <el-input v-model="form.zjlb" @blur="jkxsbutton = true"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">交款日期：</td>
                            <td>
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="form.jkrq"
                                        style="width: 100%"
                                    ></el-date-picker>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">欠租应收</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.qzys" @blur="hj1num"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sjqbutton" @dblclick="sjqbutton = false">
                                收旧欠（{{ form.sjqsj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收旧欠（<el-input v-model="form.sjqsj" @blur="sjqbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.sjq" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">旧欠结欠</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.jqjq" @blur="hj2num"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">当年应收</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.dnys" @blur="hj1num"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sdnbutton" @dblclick="sdnbutton = false">
                                收当年（{{ form.sdnzj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收当年（<el-input v-model="form.sdnzj" @blur="sdnbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.sdn" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">当年结欠</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.dnjq" @blur="hj2num"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000"></td>
                            <td></td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sknbutton" @dblclick="sknbutton = false">
                                收跨年（{{ form.sknzj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收跨年（<el-input v-model="form.sknzj" @blur="sknbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.skn" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj1button" @dblclick="hj1button = false">
                                {{ form.hj1 }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj1" @blur="hj1button = true"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj3button" @dblclick="hj3button = false">
                                {{ form.hj }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj" @blur="hjbutton"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj2button" @dblclick="hj2button = false">
                                {{ form.hj2 }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj2" @blur="hj2button = true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">大写</td>
                            <td colspan="5" v-if="dxbutton" @dblclick="dxbutton = false">
                                <span>{{ form.dx }}</span>
                            </td>
                            <td colspan="5" v-else>
                                <el-form-item>
                                    <el-input v-model="form.dx" @blur="dxbutton = true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">财务签字：</td>
                            <td colspan="3"></td>
                            <td style="text-align: center; font-weight: 700; color: #000">房管员：</td>
                            <td></td>
                        </tr>
                    </table>
                    <table class="table-1" style="margin-top: 16px">
                        <!-- 三行三列的表格 -->
                        <tr>
                            <td colspan="6" style="font-weight: 700; padding: 10px; font-size: 20px">自有房屋租金交款单</td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">交款单位：</td>
                            <td colspan="3">
                                {{ form.czr }}
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">管理部门：</td>
                            <td>房产经理部</td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">交款形式：</td>
                            <td colspan="3" v-if="jkxsbutton" @dblclick="jkxsbutton = false">
                                {{ form.zjlb }}
                            </td>
                            <td colspan="3" v-else>
                                <el-form-item prop="dwczh">
                                    <el-input v-model="form.zjlb" @blur="jkxsbutton = true"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">交款日期：</td>
                            <td>
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="form.jkrq"
                                        style="width: 100%"
                                    ></el-date-picker>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">欠租应收</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.qzys" @blur="hj1num"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sjqbutton" @dblclick="sjqbutton = false">
                                收旧欠（{{ form.sjqsj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收旧欠（<el-input v-model="form.sjqsj" @blur="sjqbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.sjq" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">旧欠结欠</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.jqjq" @blur="hj2num"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">当年应收</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.dnys" @blur="hj1num"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sdnbutton" @dblclick="sdnbutton = false">
                                收当年（{{ form.sdnzj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收当年（<el-input v-model="form.sdnzj" @blur="sdnbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.sdn" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">当年结欠</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.dnjq" @blur="hj2num"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000"></td>
                            <td></td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sknbutton" @dblclick="sknbutton = false">
                                收跨年（{{ form.sknzj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收跨年（<el-input v-model="form.sknzj" @blur="sknbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.skn" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj1button" @dblclick="hj1button = false">
                                {{ form.hj1 }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj1" @blur="hj1button = true"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj3button" @dblclick="hj3button = false">
                                {{ form.hj }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj" @blur="hjbutton"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj2button" @dblclick="hj2button = false">
                                {{ form.hj2 }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj2" @blur="hj2button = true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">大写</td>
                            <td colspan="5" v-if="dxbutton" @dblclick="dxbutton = false">
                                <span>{{ form.dx }}</span>
                            </td>
                            <td colspan="5" v-else>
                                <el-form-item>
                                    <el-input v-model="form.dx" @blur="dxbutton = true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">财务签字：</td>
                            <td colspan="3"></td>
                            <td style="text-align: center; font-weight: 700; color: #000">房管员：</td>
                            <td></td>
                        </tr>
                    </table>
                    <table class="table-1" style="margin-top: 16px">
                        <!-- 三行三列的表格 -->
                        <tr>
                            <td colspan="6" style="font-weight: 700; padding: 10px; font-size: 20px">自有房屋租金交款单</td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">交款单位：</td>
                            <td colspan="3">
                                {{ form.czr }}
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">管理部门：</td>
                            <td>房产经理部</td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">交款形式：</td>
                            <td colspan="3" v-if="jkxsbutton" @dblclick="jkxsbutton = false">
                                {{ form.zjlb }}
                            </td>
                            <td colspan="3" v-else>
                                <el-form-item prop="dwczh">
                                    <el-input v-model="form.zjlb" @blur="jkxsbutton = true"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">交款日期：</td>
                            <td>
                                <el-form-item>
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="form.jkrq"
                                        style="width: 100%"
                                    ></el-date-picker>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">欠租应收</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.qzys" @blur="hj1num"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sjqbutton" @dblclick="sjqbutton = false">
                                收旧欠（{{ form.sjqsj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收旧欠（<el-input v-model="form.sjqsj" @blur="sjqbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.sjq" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">旧欠结欠</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.jqjq" @blur="hj2num"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">当年应收</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.dnys" @blur="hj1num"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sdnbutton" @dblclick="sdnbutton = false">
                                收当年（{{ form.sdnzj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收当年（<el-input v-model="form.sdnzj" @blur="sdnbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.sdn" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">当年结欠</td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.dnjq" @blur="hj2num"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000"></td>
                            <td></td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-if="sknbutton" @dblclick="sknbutton = false">
                                收跨年（{{ form.sknzj }}）
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000" v-else>
                                收跨年（<el-input v-model="form.sknzj" @blur="sknbutton = true"></el-input>）
                            </td>
                            <td>
                                <el-form-item>
                                    <el-input v-model="form.skn" @blur="hjnum"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj1button" @dblclick="hj1button = false">
                                {{ form.hj1 }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj1" @blur="hj1button = true"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj3button" @dblclick="hj3button = false">
                                {{ form.hj }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj" @blur="hjbutton"></el-input>
                                </el-form-item>
                            </td>
                            <td style="text-align: center; font-weight: 700; color: #000">合计</td>
                            <td v-if="hj2button" @dblclick="hj2button = false">
                                {{ form.hj2 }}
                            </td>
                            <td v-else>
                                <el-form-item>
                                    <el-input v-model="form.hj2" @blur="hj2button = true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">大写</td>
                            <td colspan="5" v-if="dxbutton" @dblclick="dxbutton = false">
                                <span>{{ form.dx }}</span>
                            </td>
                            <td colspan="5" v-else>
                                <el-form-item>
                                    <el-input v-model="form.dx" @blur="dxbutton = true"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; font-weight: 700; color: #000">财务签字：</td>
                            <td colspan="3"></td>
                            <td style="text-align: center; font-weight: 700; color: #000">房管员：</td>
                            <td></td>
                        </tr>
                    </table>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import { dwcadd } from '@/api/index';
import print from 'vue-print-nb';
import { numberToChinese } from '@/utils/request.js';
export default {
    data: function () {
        return {
            jkxsbutton: true, //交款形式
            sjqbutton: true, //收旧欠
            sdnbutton: true, //收当年
            sknbutton: true, //收跨年
            dxbutton: true, //大写
            hj1button: true, //合计1
            hj2button: true, //合计3
            hj3button: true, //合计2
            printObj: {
                id: 'print-content',
                popTitle: '自有房屋租金交款单' // 如果不设置 默认是没有值即 undifined
            },
            form: {
                qzys: 0, //欠租应收
                sjq: 0, //收旧欠
                jqjq: 0, //旧欠结欠
                dnys: 0, //当年应收
                sdn: 0, //收当年
                dnjq: 0, //当年结欠
                skn: 0, //收跨年
                hj: 0, //第二个合计
                hj1: 0, //第一个合计
                hj2: 0 //第三个合计
            }
        };
    },
    directives: {
        print
    },
    methods: {
        printmsg() {
            this.sjqbutton = true;
            this.sdnbutton = true;
            this.sknbutton = true;
        },

        // 数字转换大写繁体字方法
        getnewnum(num) {
            let dxnum = numberToChinese(num);
            this.$set(this.form, 'dx', dxnum);
        },
        // 合计写完后生成
        hjbutton() {
            this.getnewnum(this.form.hj);
            this.hj3button = true;
        },
        // 合计1计算
        hj1num() {
            this.form.hj1 = (parseFloat(this.form.qzys) + parseFloat(this.form.dnys)).toFixed(2);
        },
        // 合计2计算
        hjnum() {
            this.form.hj = (parseFloat(this.form.sjq) + parseFloat(this.form.sdn) + parseFloat(this.form.skn)).toFixed(2);
            this.getnewnum(this.form.hj);
        },
        // 合计3计算
        hj2num() {
            this.form.hj2 = (parseFloat(this.form.jqjq) + parseFloat(this.form.dnjq)).toFixed(2);
        }
    },
    mounted() {
        // this.form.dx = '';
    },
    created() {
        console.log('获取得到的数据', this.$route.query);
        this.form.czr = this.$route.query.czr;
        this.form.zjlb = this.$route.query.zjlb;
        this.form.jkrq = this.$route.query.jkrq;
        this.form.sdn = this.$route.query.sdn;
        // 第一个合计
        this.form.hj1 = (parseFloat(this.form.qzys) + parseFloat(this.form.dnys)).toFixed(2);
        // 第二个合计
        this.form.hj = (parseFloat(this.form.sjq) + parseFloat(this.form.sdn) + parseFloat(this.form.skn)).toFixed(2);
        this.getnewnum(this.form.hj);
        // 第二个合计
        this.form.hj2 = (parseFloat(this.form.jqjq) + parseFloat(this.form.dnjq)).toFixed(2);
    }
};
</script>

<style scoped>
/* @page {
    size: A4;
    margin: 0mm;
} */
</style>
<style>
@media print {
    @page {
        size: A4;
        margin: 8mm 14mm 0;
    }
    body,
    html,
    div {
        height: auto !important;
    }
    body {
        width: 100%;
        zoom: 60%;
    }
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    table-layout: fixed;
    /*合并相邻表格的间距*/
}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    padding: 18px;
    box-sizing: border-box;
    color: #606266;
    word-wrap: break-word;
    word-break: break-all;
}
#print-content .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 0;
}
</style>